<!DOCTYPE html>
<html lang="en">

<head>
    <title>MedBloc - Admin Portal</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css\style.css">
    <link rel="stylesheet" type="text/css" href="css\card.css">
    <link rel="stylesheet" type="text/css" href="css\jquery.json-viewer.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
    <script src="bower_components/ng-websocket/ng-websocket.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
    <script src="http://bitwiseshiftleft.github.io/sjcl/sjcl.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/j-x-huang/Medical-Blockchain@vfinal/endpoints.js"></script>
    <script src="js/angular-module.js"></script>
    <script src="js/jquery.json-viewer.js"></script>
    <script src="js/jsencrypt/bin/jsencrypt.js"></script>
    <script src="js/encryption.js"></script>
    <script src="patientController.js"></script>
    <script src="cryptoController.js"></script>
    <script src="recordsController.js"></script>
    <script src="addRecordController.js"></script>


    <script src="https://dwmkerr.github.io/angular-modal-service/angular-modal-service.js"></script>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myCtrl" onload="loaded()">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand">MedBloc - Admin Portal</a>
            </div>
        </div>
    </nav>

    <!--Modal Box to add health providers-->
    <div id="hpModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" onclick="var decrypted = symDecrypt('U2FsdGVkX1+7BOGI6SODxf0aQjzypAk9gPRjmisMB1M=','598veczqUe9A/12Ighb9AQ==')">&times;</button>
                    <h4 class="modal-title">Add Healthcare Provider</h4>
                </div>
                <div class="modal-body">
                    <p>HID*:
                        <input type="text" ng-model="healthProviderForm.id"> </p>
                    <p>Name*:
                        <input type="text" ng-model="healthProviderForm.name"> </p>
                    <p>Phone*:
                        <input type="text" ng-model="healthProviderForm.phone"> </p>
                    <p>Address*:
                        <input type="text" ng-model="healthProviderForm.address"> </p>
                </div>
                <div class="modal-footer">
                    <button ng-click="submitHP()" type="button" class="btn btn-default" data-dismiss="modal">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <br/>

    <div class="container-fluid">
        <p>Patient Key: {{patientKey}}</p>
        <p>Private Key: {{privateKey}}</p>
        <input type="file" id="file" onchange="angular.element(this).scope().handleFiles(this.files)" />

    </div>
    <hr />
    <!-- Tab Nav Bar-->
    <ul class="nav nav-tabs">
        <li class="dropdown active">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Participants
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li>
                    <a href="#patient" data-toggle="tab" ng-click="setTab('Patient')">Patient</a>
                </li>
                <li>
                    <a href="#healthProvider" data-toggle="tab" ng-click="setTab('HealthProvider')">Healthcare Provider</a>
                </li>
            </ul>
        </li>
        <li>
            <a data-toggle="tab" href="#transactions">Transactions</a>
        </li>
    </ul>

    <!-- Tab Content -->
    <div id="content" class="tab-content">

        <div id="patient" class="tab-pane fade in active">
            <h1>Patients</h1>
            <button type="button" class="btn btn-default refreshBtn" ng-click="addPatient()">Add Patient</button>
            <button type="button" class="btn btn-default refreshBtn" ng-click="getPatients()">Get Patients</button>
            <div class="container-fluid" id="patientTable">
                <table class="table table-striped" style="width: 100%;">
                    <tr>
                        <th>ID</th>
                        <th>Prefix</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Address</th>
                        <th>Options</th>
                    </tr>
                    <tr ng-repeat="row in myArray">
                        <td>{{row.id}}</td>
                        <td>{{row.prefix}}</td>
                        <td>{{row.first}}</td>
                        <td>{{row.last}}</td>
                        <td>{{row.address}}</td>
                        <td>
                            <button type="button" class="btn btn-default" ng-click="viewRecords($index)">View Records</button>
                            <button type="button" class="btn btn-default" ng-click="editPatient($index)" ng-show="patientTab">Edit</button>
                            <button type="button" ng-click="addRecord($index)" class="btn btn-default">+</button>
                            <button type="button" class="btn btn-default" ng-click="delete($index)">-</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="healthProvider" class="tab-pane fade">
            <h1>Healthcare Providers</h1>
            <button type="button" class="btn btn-default refreshBtn" data-toggle="modal" data-target="#hpModal">Add Health
                Provider</button>
            <button type="button" class="btn btn-default refreshBtn" ng-click="getData('HealthProvider')">Get Healthcare Providers</button>

            <div class="container-fluid" id="hpTable">

                <table class="table table-striped" style="width: 100%;">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Address</th>
                        <th>Options</th>
                    </tr>
                    <tr ng-repeat="row in myArray">
                        <td>{{row.id}}</td>
                        <td>{{row.name}}</td>
                        <td>{{row.phone}}</td>
                        <td>{{row.address}}</td>
                        <td>
                            <button type="button" class="btn btn-default" ng-click="delete($index)">-</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div id="transactions" class="tab-pane fade">
            <h3>Generate Patient Key</h3>
            <button type="button" class="btn btn-default" ng-click="makeKey()">Generate</button>
            <p>{{patientKey}}</p>
            <!-- <input type="text" ng-model="hppub">
            <button type="button" class="btn btn-default" ng-click="wrapKey()">Wrap key</button>
            <p>{{wKey}}</p> -->

            <h3>Decrypt Key</h3>
            <div class="form-group">
                <p>encryptedKey
                    <input type="text" ng-model="encryptedPkey">
                </p>
                <button type="button" class="btn btn-default" ng-click="testDecrypt()">Decrypt</button>
                {{decryptedKey}}
            </div>

        </div>
    </div>

    <hr />

    <div class="container-fluid">

        <!--Box to view response in JSON format -->
        <h4>Response data</h4>
        <pre id="json-renderer"></pre>
    </div>
</body>

</html>